<template>
    <div class="blog-list-container">
      <div v-for="blog in blogs" :key="blog.id" class="blog-item">
        <img :src="blog.image" alt="Blog Image" v-if="blog.image" style="width: 100px; margin: 30px 20px;"/>
        <h3>{{ blog.title }}</h3>
        <p>{{ blog.content }}</p>
        <router-link :to="`/blog/${blog.id}`" style="margin-right: 30px;">详情</router-link>
        <router-link :to="`/post/edit/${blog.id}`" style="margin-right: 30px;">编辑</router-link> 
        <button @click="deletePost(blog.id)">删除</button> 
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import axios from 'axios';
  import life3 from "../images/life-3.jpg"
  
  const blogs = ref([
  { id: 1, content: '原来追星会不远万里一个人来不熟悉的城市 ​​' ,image:life3},
  ]); // 存储博客列表
  
//   // 获取博客列表
//   const fetchBlogs = async () => {
//     try {
//       const response = await axios.get('http://localhost:3306api/posts'); // 替换为实际 API
//       blogs.value = response.data;
//     } catch (error) {
//       console.error('获取博客失败:', error);
//     }
//   };
  
//   // 删除文章
//   const deletePost = async (id) => {
//     try {
//       await axios.delete(`http://localhost:3306/api/posts/${id}`); // 替换为实际 API
//       fetchBlogs(); // 重新获取博客列表
//     } catch (error) {
//       console.error('删除文章失败:', error);
//     }
//   };
  
//   // 在组件挂载时获取博客列表
//   onMounted(() => {
//     fetchBlogs();
//   });
  </script>
  
  <style scoped>
  .blog-list-container {
    padding: 20px;
  }
  
  .blog-item {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
   
  }

  </style>